<template>
  <div class="map-view">
    <div id="main"></div>
  </div>
</template>

<script setup>
import geoJson from '@/assets/data.json'
import { travelMap } from '@/api/api'
import echarts from 'echarts'
import map from '@/utils/map'

travelMap().then(res => {
  if (res.data.status === 200) {
    let { points, linesData } = res.data.data
    console.log(points, linesData)
    draw(points, linesData)
  }
}).catch(error => {
  throw error
})

const draw = (points, linesData) => {
  let myChart = echarts.init(document.getElementById('main'))
  // 注册可用地图
  echarts.registerMap('china', geoJson)
  // 配置散点图
  let pointsObj = {
    type: 'effectScatter',
    coordinateSystem: 'geo',
    showEffectOn: 'render',
    symbolSize: 10,
    zlevel: 1,
    data: points
  }
  let lineObj = {
    // 配置线路动画
    type: 'lines',
    zleve: 2,
    effect: {
      show: true,
      period: 4,
      symbol: 'arrow',
      symbolSize: 6,
      trailLength: 0.1
    },
    lineStyle: {
      normal: {
        width: 2,
        opacity: 0.4,
        curveness: 0.2,
      }
    },
    data: linesData
  }
  map.series[1] = pointsObj
  map.series[2] = lineObj
  let option = map
  myChart.setOption(option)
}
</script>

<style lang="less">
.map-view {
  width: 100%;
  #main {
    width: 100%;
    height: 600px;
    text-align: center;
  }
}
</style>